<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{user/layout}">

<head>
	<title>Index - sport activity </title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<section class="pt-xl-8">
			<div class="container">
				<div class="bg-dark rounded-4 text-center position-relative overflow-hidden py-5">
					<!-- Svg decoration -->
					<figure class="position-absolute top-0 start-0 ms-n8">
						<svg width="424" height="405" viewBox="0 0 424 405" fill="none" xmlns="http://www.w3.org/2000/svg">
							<ellipse cx="212" cy="202.5" rx="212" ry="202.5" fill="url(#paint0_linear_153_3831)"></ellipse>
							<defs>
							<linearGradient id="paint0_linear_153_3831" x1="212" y1="0" x2="212" y2="405" gradientUnits="userSpaceOnUse">
							<stop offset="0.0569271" stop-color="#D9D9D9" stop-opacity="0"></stop>
							<stop offset="0.998202" stop-color="#D9D9D9" stop-opacity="0.5"></stop>
							</linearGradient>
							</defs>
						</svg>
					</figure>
					<!-- SVG decoration -->
					<figure class="position-absolute top-0 end-0 me-n8 mt-5">
						<svg class="opacity-3" width="371" height="354" viewBox="0 0 371 354" fill="none" xmlns="http://www.w3.org/2000/svg">
							<ellipse cx="172.5" cy="176.5" rx="131.5" ry="125.5" fill="url(#paint0_linear_195_2)"></ellipse>
							<ellipse cx="185.5" cy="177" rx="185.5" ry="177" fill="url(#paint1_linear_195_2)"></ellipse>
							<defs>
							<linearGradient id="paint0_linear_195_2" x1="172.5" y1="51" x2="172.5" y2="302" gradientUnits="userSpaceOnUse">
							<stop offset="0.0569271" stop-color="#D9D9D9" stop-opacity="0.5"></stop>
							<stop offset="0.998202" stop-color="#D9D9D9" stop-opacity="0"></stop>
							</linearGradient>
							<linearGradient id="paint1_linear_195_2" x1="185.5" y1="0" x2="185.5" y2="354" gradientUnits="userSpaceOnUse">
							<stop offset="0.0569271" stop-color="#D9D9D9" stop-opacity="0.2"></stop>
							<stop offset="0.998202" stop-color="#D9D9D9" stop-opacity="0"></stop>
							</linearGradient>
							</defs>
						</svg>
					</figure>
					<!-- Breadcrumb -->
					<!--<div class="d-flex justify-content-center position-relative z-index-9">
						<nav aria-label="breadcrumb">
							<ol class="breadcrumb breadcrumb-dots breadcrumb-dark mb-1">
								<li class="breadcrumb-item"><a href="#">Home</a></li>
								<li class="breadcrumb-item active" aria-current="page">Portfolio Masonry</li>
							</ol>
						</nav>
					</div>-->
					<!-- Title -->
					<h1 class="h2 text-white">Show The Last Sports</h1>
				</div>
				<div class="inner-container center mt-5 mb-2" th:if="${table.total > 0}">
					<div class="row  row-cols-md-7 justify-content-center">
						<div class="col text-center">
							<form th:action="@{/list}">
								<div class="rounded position-relative">
									<input type="hidden" th:value="${type}" name="type" />
									<input name= "title" th:value="${title}" class="form-control bg-light pe-5" type="search" placeholder="Search title..." aria-label="Search">
									<button class="btn bg-transparent border-0 px-2 py-0 position-absolute top-50 end-0 translate-middle-y" type="submit"><i class="bi bi-search"> </i></button>
								</div>
							</form>
						</div>
					</div>
				</div>
				<!-- Title & Tab -->
				<div class="d-lg-flex justify-content-between align-items-center  mt-6">
					<!-- Title -->
					<h4 class="mb-3 mb-lg-0">Last Sports</h4>
					<!-- Tabs -->
					<!--<ul class="nav nav-pills gap-1 nav-pills-light">
						<li class="nav-item">
							<a class="nav-link active">All blog</a>
						</li>
						<li class="nav-item">
							<a class="nav-link">Marketing</a>
						</li>
						<li class="nav-item">
							<a class="nav-link">Design</a>
						</li>
						<li class="nav-item">
							<a class="nav-link">Lifestyle</a>
						</li>
						<li class="nav-item">
							<a class="nav-link">Technology</a>
						</li>
					</ul>-->
				</div>

				<!-- Blog grid -->
				<div class="row g-4 g-sm-5 g-xl-7 mt-0">
					<div class="inner-container center" th:if="${table.total == 0}">
						<div class="row row-cols-4 row-cols-md-6 g-4 g-sm-5 g-md-6 justify-content-center">
							<div class="col text-center">
							<span class="text-primary fw-bold text-uppercase">Not Data</span>
							</div>
						</div>
					</div>
					<!-- Item -->
					<div class="col-md-6 col-lg-4" th:each="sport,sportStat:${table.rows}">
						<article class="card bg-transparent h-100 p-0">
							<!-- Badge -->
							<div class="badge text-bg-dark position-absolute top-0 start-0 m-3" th:text="${sport.typeString}"></div>

							<!-- Card image -->
							<img th:src="${sport.sportImg}" class="card-img" th:alt="${sport.sportTitle}" style="width:100%;height: 195px;">

							<!-- Card Body -->
							<div class="card-body px-2 pb-4">
								<!-- Title -->
								<h6 class="card-title mb-2"><a href="#" th:text="${sport.sportTitle}"></a></h6>
								<p class="small mb-0" th:if="${sport.sportType == 0}" th:text="${sport.room.roomAddress}"></p>
								<p class="small mb-0" th:if="${sport.sportType == 1}" th:text="${sport.site.siteAddress}"></p>
							</div>

							<!-- Card footer -->
							<div class="card-footer bg-transparent d-flex justify-content-between px-2 py-0">
								<span class="heading-color fw-semibold mb-0" th:text="${#dates.format(sport.sportPublishTime, 'dd/MM/yyyy HH:mm')}"></span>
								<a class="icon-link icon-link-hover stretched-link" th:href="@{/detail/} + ${sport.sportId}">Read
									more<i class="bi bi-arrow-right"></i> </a>
							</div>
						</article>
					</div>
					
				</div>
				<!-- Pagination START -->
				<!--<div class="row mt-7">
					<div class="col-12 mx-auto">
						<ul class="pagination pagination-primary-soft d-flex justify-content-center mb-0">
							<li>
								<ul class="list-unstyled">
									<li class="page-item disabled">
										<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Prev</a>
									</li>
									<li class="page-item active"><a class="page-link" href="#">1</a></li>
									<li class="page-item"><a class="page-link" href="#">2</a></li>
									<li class="page-item"><a class="page-link" href="#">..</a></li>
									<li class="page-item"><a class="page-link" href="#">22</a></li>
									<li class="page-item">
										<a class="page-link" href="#">Next</a>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>-->
				<!-- Pagination END -->

			</div>
		</section>
	</div>
	<script layout:fragment="fragment_script">

	</script>
</body>

</html>